import React, { Component, createRef } from 'react'
import Child from './Child'

export default class Index extends Component {
  inputRef = createRef()
  childRef = createRef()

  componentDidMount () {
    // 旧的写法
    // this.refs.inputRef.focus()

    this.inputRef.current.focus()
  }

  change = () => {
    // console.log(this.childRef.current)
    this.childRef.current.setState({
      food: '帝王蟹'
    })
  }

  render () {
    return (
      <div>
        Index
        <p>
          {/* <input type='text' ref='inputRef' /> */}
          <input type='text' ref={this.inputRef} />
        </p>
        <p>
          <button onClick={this.change}>更改子组件中的值</button>
        </p>
        <Child ref={this.childRef} />
      </div>
    )
  }
}
